<template>
  <div class="social-info">
    <div class="info-header">
      <el-button 
        type="primary" 
        :icon="Refresh" 
        @click="refreshSocialInfo"
        :loading="loading"
      >
        刷新社交信息
      </el-button>
    </div>

    <el-row :gutter="20">
      <!-- 班主任信息 -->
      <el-col :span="24">
        <el-card v-loading="loading" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><Avatar /></el-icon>
              <span>班主任信息</span>
            </div>
          </template>

          <div v-if="hasClassTeacher" class="teacher-content">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="班主任姓名">
                {{ classTeacher.headTeacher || '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="联系电话">
                {{ classTeacher.headTeacherContact || '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="班级名称">
                {{ classTeacher.className || '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="年级">
                {{ classTeacher.grade || '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="班级容量">
                {{ classTeacher.capacity ? `${classTeacher.capacity}人` : '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="课程安排">
                {{ classTeacher.courseSchedule || '暂无安排' }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <el-empty v-else description="暂无班主任信息" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 班级同学 -->
      <el-col :span="24">
        <el-card v-loading="loading" class="info-card">
          <template #header>
            <div class="card-header">
              <el-icon><UserFilled /></el-icon>
              <span>班级同学 ({{ classmates.length }}人)</span>
            </div>
          </template>

          <div v-if="hasClassmates" class="classmates-content">
            <el-row :gutter="16">
              <el-col 
                v-for="classmate in classmates" 
                :key="classmate.id" 
                :span="8"
                class="classmate-col"
              >
                <el-card class="classmate-card" shadow="hover">
                  <div class="classmate-info">
                    <div class="classmate-avatar">
                      <el-avatar 
                        :src="classmate.photo" 
                        :size="60"
                        :icon="UserFilled"
                      />
                    </div>
                    <div class="classmate-details">
                      <h4>{{ classmate.name }}</h4>
                      <p class="student-id">学号: {{ classmate.studentId }}</p>
                      <p class="contact">{{ classmate.contactPhone || '联系方式未公开' }}</p>
                      <div class="tags">
                        <el-tag v-if="classmate.sex !== undefined" size="small" type="info">
                          {{ getSexText(classmate.sex) }}
                        </el-tag>
                        <el-tag v-if="classmate.dormBuilding" size="small" type="success">
                          {{ classmate.dormBuilding }}{{ classmate.roomNumber }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <el-empty v-else description="暂无班级同学信息" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { Avatar, UserFilled, Refresh } from '@element-plus/icons-vue'
import { useStudentPortalStore } from '@/stores/studentPortalStore'
import { useUserStore } from '@/stores/user'

const studentPortalStore = useStudentPortalStore()
const userStore = useUserStore()

// 计算属性
const loading = computed(() => studentPortalStore.loading)
const classmates = computed(() => studentPortalStore.classmates)
const classTeacher = computed(() => studentPortalStore.classTeacher)
const hasClassmates = computed(() => studentPortalStore.hasClassmates)
const hasClassTeacher = computed(() => studentPortalStore.hasClassTeacher)

// 获取性别文本
const getSexText = (sex) => {
  if (sex === 1 || sex === '1') return '男'
  if (sex === 0 || sex === '0') return '女'
  return '未知'
}

// 刷新社交信息
const refreshSocialInfo = async () => {
  const userId = userStore.userInfo?.userId
  if (userId) {
    await Promise.all([
      studentPortalStore.fetchClassmates(userId),
      studentPortalStore.fetchClassTeacher(userId)
    ])
  }
}

// 组件挂载时获取数据
onMounted(() => {
  refreshSocialInfo()
})
</script>

<style scoped>
.social-info {
  padding: 20px;
}

.info-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.info-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.teacher-content {
  padding: 20px 0;
}

.classmates-content {
  max-height: 600px;
  overflow-y: auto;
  padding: 20px 0;
}

.classmate-col {
  margin-bottom: 20px;
}

.classmate-card {
  border-radius: 8px;
  height: 100%;
}

.classmate-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.classmate-avatar {
  flex-shrink: 0;
}

.classmate-details {
  width: 100%;
}

.classmate-details h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-weight: 600;
  font-size: 16px;
}

.student-id {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.contact {
  margin: 4px 0;
  color: #888;
  font-size: 12px;
}

.tags {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
</style>